<template>
	<view>
		<view class="tabact">
			<view v-for="(item,index) of tabact" :key="index" class="tabact-item " :class="activeIndexs==index?'active':''"  @click="changetab(index)">
				<view v-if="actPosition=='1'" class="tab-bar" :style="{backgroundColor:activeColor}"></view>
				<view class="tab-title" :style="{color:activeIndexs==index?activetextColor:''}">
					{{item.name}}
				</view>
				<view v-if="actPosition=='0'" class="tab-bar" :style="{backgroundColor:activeColor}">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			activetextColor:{
				type: String,
				default: 'red'
			},
			activeColor:{
				type: String,
				default: 'red'
			},
			tabact:{
				type: Array,
				default: []
			},
			activeIndex:{
				type:Number,
				default:0
			},
			actPosition:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				activeIndexs:this.activeIndex
			};
		},
		watch:{
			activeIndex(e){
				console.log(e)
				this.activeIndexs = e
			}
		},
		methods:{
			changetab(index){
				if(index!=this.activeIndex){
					this.$emit('tabactChange',index)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
   .tabact{
   	width:100%;
   	display:flex;
   	justify-content: center;
   	align-items: center;
   	.tabact-item:first-child{
   		margin-right:53rpx;
   	}
   	.tabact-item{
   		display:flex;
   		flex-direction: column;
   		justify-content: center;
   		align-items: center;
   		.tab-title{
			color:#171717;
			margin-top:8rpx;
   			font-size: 31rpx;
   			margin-bottom:10rpx;
			font-weight:500;
   		}
   		.tab-bar{
   			// width: 110rpx;
   			height: 5rpx;
   			opacity: 0;
   			background-color:#E83726;
			width:100%;
   		}
   	}
   	.tabact-item.active{
   		.tab-title{
   			color:#D9001B;
   		}
   		.tab-bar{
   			opacity: 1;
   		}
   	}
   	
   }
   
</style>
